<%--
  Created by IntelliJ IDEA.
  User: dqf
  Date: 2015/7/27
  Time: 16:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!--<script src="../resource/echart/echarts-all.js"></script>-->
<!--<script src="../resource/echart/echarts.js"></script>-->

<!--<link href="../resource/weather-icons.css" rel="stylesheet"/>-->
<!--<script src="../resource/echart/codemirror.js"></script>-->
<!--<script src="../resource/echart/echartsHome.js"></script>-->

<!--<link href="../resource/echart/css/codemirror.css" rel="stylesheet">-->
<!--<link href="../resource/echart/css/monokai.css" rel="stylesheet">-->

<div class="row">
  <div class="row" style="opacity: 1;border-bottom: 1px solid #dee4e8;">
    <div class="row">
        <div class="col-lg-3 col-sm-3 col-xs-12">
              <div id="ajax_client-list" class="main-box infographic-box colored emerald-bg" style="margin-left: 8px;">
                <i class="fa fa-linkedin-square"></i>
                <span class="headline">客戶信息</span>
                <span class="value">&nbsp;<s:property value="businessData.client"/></span>
                <input type="hidden" id="selectedIds" value=""/>
              </div>
            </div>
      <div class="col-lg-3 col-sm-3 col-xs-12">
        <div id="ajax_linkman-list" class="main-box infographic-box colored green-bg">
          <i class="fa fa-user"></i>
          <span class="headline">联系人信息</span>
          <span class="value">&nbsp;<s:property value="businessData.link"/></span>
        </div>
      </div>

      <div class="col-lg-3 col-sm-3 col-xs-12">
        <div id="ajax_proInfo-list" class="main-box infographic-box colored red-bg">
          <i class="fa fa-book"></i>
          <span class="headline">项目信息</span>
          <span class="value">&nbsp;<s:property value="businessData.proInfo"/></span>
        </div>
      </div>

      <div class="col-lg-3 col-sm-3 col-xs-12">
        <div id="ajax_feedback-list" class="main-box infographic-box colored purple-bg" style="margin-right: 8px;">
          <i class="fa fa-pencil-square-o"></i>
          <span class="headline">反馈信息</span>
          <span class="value">&nbsp;<s:property value="businessData.proBack"/></span>
        </div>
      </div>
    </div>

  </div>
  <div id="business_data">
    <div class="row createBtn">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <div >
          <table class="table">
            <tbody>
            <tr>
              <th class="col-md-1 text-justify" style="padding-top:15px;font-weight:500">按项目筛选</th>
              <td class="col-md-5">
                <section  class="col col-md-12" style="padding-left: 0;">
                  <label class="input col-md-10" style="margin-top: 10px;width: 500px;">
                   <select name="proInfoId" id="proInfoId" class="select2">
                       <optgroup label="支持过滤查询">
                        <option value="">全部</option>
                        <s:iterator value="proInfoSet" id="list">
                          <option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
                        </s:iterator>
                       </optgroup>
                    </select>
                  </label>
                </section>
              </td>
              <th class="col-md-1 text-justify" style="padding-top:15px;font-weight:500">按时间分类</th>
              <td class="col-md-5">
                <section  class="col col-md-12" style="padding-left: 0;">
                  <select name="firstType" id="firstType" class="select2">
                      <optgroup label="支持过滤查询">
                          <option value="year">年</option>
                          <option value="month">月</option>
                          <option value="week">周</option>
                      </optgroup>
                  </select>
                </section>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>


    <div class="row">
        <div id="loadChart"  class="col-sm-12 col-md-12 col-lg-12">
            <div id="myChart" style="height: 400px;"></div>

         </div>
    </div>
    <section id="widget-grid" class="">

      <div class="row createBtn">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div >
            <table class="table">
              <tbody>
              <tr>
                <td class="col-md-6" colspan="3">
                  <section  class="col col-md-12" style="padding-left: 0;">
                    <select name="type1" id="type1" class="select2">
                    <optgroup label="支持过滤查询">
                        <option value="year">按年显示</option>
                        <option value="month">按月显示</option>
                        <option value="week">按周显示</option>
                    </optgroup>
                  </section>
                </td>
                <td class="col-md-2">
                  <section  class="col col-md-12" style="padding-left: 0;">
                    <select name="pipeproInfoId" id="pipeproInfoId" class="select2">
                      <optgroup label="支持过滤查询">
                        <option value="">全部项目</option>
                        <s:iterator value="proInfoSet" id="list">
                          <option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
                        </s:iterator>
                      </optgroup>
                    </select>
                  </section>
                </td>
                <td class="col-md-2">
                  <section  class="col col-md-12" style="padding-left: 0;">
                    <select name="userId" id="userId" class="select2">
                      <optgroup label="支持过滤查询">
                        <option value="">全部人员</option>
                        <s:iterator value="userSet" id="list">
                          <option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
                        </s:iterator>
                      </optgroup>
                    </select>
                  </section>
                </td>
                <td class="col-md-2">
                  <section  class="col col-md-12" style="padding-left: 0;">
                    <select name="type2" id="type2" class="select2">
                      <optgroup label="支持过滤查询">
                          <option value="year">按年显示</option>
                          <option value="month">按月显示</option>
                          <option value="week">按周显示</option>
                       </optgroup>

                    </select>
                  </section>
                </td>
              </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
      <div class="row" style="border-bottom: solid 1px #e7ebee">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="position:relative;border-right:solid 1px #e7ebee">
            <div id="show_pipe_a" style="position:absolute;top:160px;left:45%;color:#03a9f4"></div>
            <div id="pipe_a" style="height:400px"></div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="position:relative">
            <div id="show_pipe_b" style="position:absolute;top:160px;left:45%;color:#03a9f4"></div>
            <div id="pipe_b" style="height:400px"></div>
        </div>
      </div>

      <!-- row -->
      <div class="row">
        <!-- NEW WIDGET START -->
          <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">
            <div  id="show_map" style="height:400px;margin-top: 20px;"></div>
          </div>
          <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
              <div class="main-box weather-box" style="background:#f3f5f6">
                  <header class="main-box-header clearfix">
                     <h2 class="pull-left" style="color:#9A9898;font-family:微软雅黑;font-weight:500">今天天气</h2>
                  </header>
                  <div class="main-box-body clearfix">
                      <div class="current" style="height:195px">
                        <div class="clearfix center-block" style="width: 223px;">
                            <canvas class="icon" id="current-weather" width="100" height="100"></canvas>
                            <div class="temp-wrapper">
                            <div class="temperature">
                                <s:property value="weatherData[0].temperature1"/><span class="sign">°</span>
                            </div>
                        <div class="desc">
                            <i class="fa fa-map-marker"></i> Shanghai
                        </div>
                      </div>
                   </div>
               </div>
               <div class="next">
                      <ul class="clearfix">
                        <li>
                            <div class="day" id="day1">

                            </div>
                            <canvas class="icon" id="current-weather1" width="50" height="50" style="margin-top:12px"></canvas>
                            <div class="temperature">
                                <span id="temperature1"></span><span class="sign">°</span>
                            </div>
                        </li>
                          <li>
                              <div class="day" id="day2">

                              </div>
                              <canvas class="icon" id="current-weather2" width="50" height="50" style="margin-top:12px"></canvas>
                              <div class="temperature">
                                <span id="temperature2"></span><span class="sign">°</span>
                              </div>
                          </li>
                          <li>
                              <div class="day" id="day3">

                              </div>
                              <canvas class="icon" id="current-weather3" width="50" height="50" style="margin-top:12px"></canvas>
                              <div class="temperature">
                                <span id="temperature3"></span><span class="sign">°</span>
                              </div>
                              </li>
                          <li>
                              <div class="day" id="day4">

                              </div>
                              <canvas class="icon" id="current-weather4" width="50" height="50" style="margin-top:12px"></canvas>
                              <div class="temperature">
                                <span id="temperature4"></span><span class="sign">°</span>
                              </div>
                          </li>
                          <li>
                              <div class="day" id="day5">

                              </div>
                              <canvas class="icon" id="current-weather5" width="50" height="50" style="margin-top:12px"></canvas>
                              <div class="temperature">
                                <span id="temperature5"></span><span class="sign">°</span>
                              </div>
                            </li>
                        </ul>
                    </div>
                  </div>
              </div>
          </div>
      </div>


      

       <%--
        <div class="row"  style="height:550px;">
           <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=64" width="540" height="291" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

        </div>
       --%>
      <!-- end row -->

      <!-- end row -->

    </section>
  </div>
</div>


<script>
 require.config({
                    paths: {
                        echarts: '../resource/echart'
                    }
                });
  $(function(){
  var piea;
   var pieb ;
    //第一个饼图

    function load_pie_a(){

      require([
         'echarts',
         'echarts/theme/blue',
         'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
         'echarts/chart/funnel'
         ], function(ec, theme){
                     if(piea){
                        piea.clear();
                     }
                      piea = ec.init(document.getElementById('pipe_a'));
                      piea.showLoading({text:'正在努力加载...'});
                      piea.setTheme(theme);
                      setTimeout(function(){
                        $.getJSON('ajax-index!pipea.action?type1='+$("#type1").val(),function(data){
                              if (data != null && data != ""){
                                  //alert(data.options.length);
                                  /*
                                  var legend_data = data.options[0].legend.data;
                                  if (legend_data == null){
                                      data.options[0].legend.data = [""];
                                  }
                                  for (var i=0;i<data.options.length;i++){
                                      var s_data = data.options[i].series[0].data;
                                      if (s_data == null){
                                          data.options[i].series[0].data = [0];
                                      }
                                  }*/
                                  console.log(data);
                                piea.setOption(data, true);

                                piea.hideLoading();

                              } else {
                                alert("数据加载错误...");
                              }
                       })},100);
            })
    }
    load_pie_a();
    $("#type1").change(load_pie_a);

    //第二个饼图

    function load_pie__b(){

          require([
             'echarts',
             'echarts/theme/blue',
             'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
             'echarts/chart/funnel'
             ], function(ec, theme){
                  if(pieb){
                       pieb.clear();
                   }
                  pieb = ec.init(document.getElementById('pipe_b'));
                  pieb.showLoading({text:'正在努力加载...'});
                  pieb.setTheme(theme);
                  setTimeout(function(){
                      $.getJSON('ajax-index!pipeb.action?type2='+$("#type2").val()+"&pipeProInfoId="+$("#pipeproInfoId").val()+"&pipeUserId="+$("#userId").val(),function(data){
                           // console.log(data);
                            if (data != null && data != ""){
                              pieb.setOption(data, true);
                              pieb.hideLoading();
                            } else {
                              alert("数据加载错误...");
                            }
                      })},200);

            });
    }
    load_pie__b();
    $("#pipeproInfoId").change(load_pie__b);
    $("#userId").change(load_pie__b);
    $("#type2").change(load_pie__b);



  });



</script>


<script>


    var mapChart;
    var mapOption;
   require([
               'echarts',
               'echarts/theme/blue',
               'echarts/chart/map'
               ], function(ec, theme){
                     if(mapChart){
                       mapChart.clear();
                     }
                     mapChart = ec.init(document.getElementById('show_map'));
                     mapOption ={
                             title : {
                               text: '全国项目情况分布图',
                               subtext: '单位: 个',
                               x:'left',
                               textStyle:{color:'#9A9898',fontWeight:'500',fontFamily:'微软雅黑'}
                             },
                             tooltip : {
                               trigger: 'item'
                             },
                             series : [
                               {
                                 name: '项目数量',
                                 type: 'map',
                                 mapType: 'china',
                                 roam: false,
                                 itemStyle:{
                                   normal:{label:{show:true}},
                                   emphasis:{label:{show:true}}
                                 },
                                  data:[]
                               }
                             ]
                       };

                      mapChart.showLoading({text:'正在努力加载...'});
                      //mapChart.setTheme(theme);
                       setTimeout(function(){
                            getMapChartData();//ajax后台交互
                       },200);

        });


        function getMapChartData(){
             $.ajax({
                 url : "ajax-index!mapData.action",
                 method:"post",
                 cache : false,
                 dataType : "json",
                 async : false,
                 success : function(data) {
                    console.log(data);
                   mapOption.series[0].data = data.dataRows;
                   mapChart.setOption(mapOption);
                   mapChart.hideLoading();
                 },
                 error:function(data){
                 }
               })

        }

</script>


 <script type="text/javascript">
          $(function(){
          pageSetUp();
                    $("#ajax_client-list").click(function(){
                       loadURL("ajax!client.action",$('#content'));
                    });
                    $("#ajax_linkman-list").click(function(){
                        loadURL("ajax-linkman!show.action",$('div#business_data'));
                    });
                    $("#ajax_proInfo-list").click(function(){
                        loadURL("ajax-project!view.action",$('div#business_data'));
                    });
                    $("#ajax_feedback-list").click(function(){
                        loadURL("ajax-pro-back!view.action",$('div#business_data'));
                    });
                     $('#firstType').change(function(){
                          if($(this).val() == "year"){
                               loadURL("ajax!echartLineByYear.action",$('#loadChart'));
                          }else if($(this).val() == "month"){
                              loadURL("ajax!echartLineByMonth.action",$('#loadChart'));
                          }else if($(this).val() == "week"){
                               loadURL("ajax!echartLineByWeek.action",$('#loadChart'));
                          }
                     });
          });

             $('#proInfoId').change(function(){

                getChartData();
            });
 </script>

  <script type="text/javascript">

         		var myChart;
                          // 路径配置

                          var cloneOption;

                          var option;


                         require(
                                       [
                                           'echarts',
                                           'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                           'echarts/chart/line'
                                       ],
                                       function (ec) {
                                           // 基于准备好的dom，初始化echarts图表
                                           myChart = ec.init(document.getElementById('myChart'));
                                           option = {
                                                timeline:{
                                                   data: [''],
                                                   label : {
                                                       formatter : function(s) {
                                                            return s;
                                                           // return s.slice(0, 4);
                                                       }
                                                   },
                                                   autoPlay : false,
                                                   playInterval : 1000
                           					},
                           					options:[
                           						{
                           							title : {
                           								'text':'',
                           								 subtext: '单位: 条',
                                                         textStyle:{color:'#9A9898',fontWeight:'500',fontFamily:'微软雅黑'}
                           							},
                           							tooltip : {'trigger':'axis'},
                           							legend : {
                           								x:'right',
                           								'data':['正常','非正常'],
                           								'selected':{
                           									'正常':true,
                           									'非正常':true
                           								}
                           							},
                           							toolbox : {
                           								'show':true,
                           								orient : 'vertical',
                           								x: 'right',
                           								y: 'center',
                           								'feature':{
                           									'mark':{'show':true},
                           									'dataView':{'show':true,'readOnly':false},
                           									'magicType':{'show':true,'type':['line','bar','stack','tiled']},
                           									'restore':{'show':true},
                           									'saveAsImage':{'show':true}
                           								}
                           							},
                           							calculable : true,
                           							grid : {'y':80,'y2':100},
                           							xAxis : [{
                           								'type':'category',
                           								'axisLabel':{'interval':0},
                           								'data':[
                           									'1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'
                           								]
                           							}],
                           							yAxis : [
                           								{
                           									'type':'value',
                           									'name':''
                           								},
                           								{
                           									'type':'value',
                           									'name':''
                           								}
                           							],
                           							series : [
                           								{
                           									'name':'正常',
                           									'type':'bar',
                           									'markLine':{
                           										symbol : ['arrow','none'],
                           										symbolSize : [4, 2],
                           										itemStyle : {
                           											normal: {
                           												lineStyle: {color:'orange'},
                           												barBorderColor:'orange',
                           												label:{
                           													position:'left',
                           													formatter:function(params){
                           														return params.value;
                           													},
                           													textStyle:{color:'orange'}
                           												}
                           											}
                           										},
                           										'data':[{'type':'average','name':'平均值'}]
                           									},
                           									'data':[]
                           								},
                           								{
                           									'name':'非正常','yAxisIndex':1,'type':'bar',
                           									'data': []
                           								}
                           							]
                           						}
                           					]
                           				};
                                  myChart.showLoading({text:'正在努力加载...'});
                                  // 为echarts对象加载数据
                                  myChart.setOption(option);
                                //  console.log(option);
                                  setTimeout(function(){
                                     getChartData();//ajax后台交互
                                   },200);

                              }
                          );

               function cloneObj(obj){
                   function Clone(){}
                   Clone.prototype = obj;
                   var o = new Clone();
                   for(var a in o){
                       if(typeof o[a] == "object") {
                           o[a] = cloneObj(o[a]);
                       }
                   }
                   return o;
               }
                          function getChartData() {
                                      //获得图表的options对象
                                      // var options = myChart.getOption();
                                      //  console.log(options);
                                       cloneOption = cloneObj(option);
                                     //  console.log( cloneOption);
                                      var proInfoId = $('#proInfoId').val();
                                      //通过Ajax获取数据
                                      $.ajax({
                                          type : "post",
                                          async : false, //同步执行
                                          url : "ajax-pro-back!getChartDataByYear.action",
                                          data : {'proInfoId':proInfoId},
                                          dataType : "json", //返回数据形式为json
                                          success : function(result) {
                                              if (result) {

                                                  var rs = result.options;
                                                // console.log(rs);
                                                  cloneOption.options[0].title.text = rs[0].title;
                                                  cloneOption.timeline.data = result.timeline;
                                                  var rs_series_first = rs[0].series;
                                                  for (var m=0; m<rs_series_first.length; m++){
                                                        var obj = rs_series_first[m].data;
                                                        cloneOption.options[0].series[m].data  = dataFormatter(rs_series_first[m].data);
                                                   }
                                                   for(var i=1; i<rs.length; i++){
                                                       cloneOption.options.push({title : {'text':rs[i].title},series : []});
                                                        var rs_series = rs[i].series;
                                                        for(var j=0; j<rs_series.length;j++){
                                                            cloneOption.options[i].series.push( {'data':dataFormatter(rs_series[j].data)} );
                                                               //  var obj = rs_series[j].data;
                                                         }
                                                   }
                                                   myChart.setOption(cloneOption);
                                                 //    console.log(cloneOption);
                                              }

                                              myChart.hideLoading();
                                          },
                                          error : function(errorMsg) {
                                              alert("图表数据失败");
                                              myChart.hideLoading();
                                          }
                                      });
                                  }


                                  function dataFormatter(obj) {
                                     var temp;
                                     for(var k=0; k<obj.length;k++){
                                        temp = obj[k];
                                        for(var key in temp ){
                                            obj[k]= {
                                               name : key,
                                               value : temp[key]
                                            }
                                       }
                                     }
                                     return obj;
                                  }


		var  status1 = "<s:property value="weatherData[0].status1"/>";
		var skycons = new Skycons({"color": "#03a9f4"});
        var rs =  getWeatherStatus(status1);
		skycons.add("current-weather", rs);
		skycons.play();
		var skycons2 = new Skycons({"color": "#fff"});
		<s:iterator value="weatherData" id="weather" status="l">
		      var index = <s:property value="#l.index"/>;
		      if(index>0){
                    var status1 = "<s:property value="#weather.status1"/>";
                    var rs =  getWeatherStatus(status1);
                    skycons2.add("current-weather"+index, rs);
                    $('#temperature'+index).html(<s:property value="#weather.temperature1"/>);
		      }
        </s:iterator>
        skycons2.play();

        <s:iterator value="dateStr1" id="date" status="l">
             var index = <s:property value="#l.index"/>+1;
             $('#day'+index).html("<s:property value="#date"/>");
        </s:iterator>


		function getWeatherStatus(status1){
		    var rs = Skycons.PARTLY_CLOUDY_DAY;
		    if(status1.indexOf("晴") != -1){
                rs = Skycons.CLEAR_DAY;
            }else if(status1.indexOf("云") != -1){
                rs = Skycons.CLOUDY;
            }else if(status1.indexOf("雾") != -1){
                rs = Skycons.FOG;
            }else if(status1.indexOf("雪") != -1){
                 rs = Skycons.SNOW;
            }else if(status1.indexOf("雨") != -1){
                 rs = Skycons.RAIN;
            }
            return rs;
		}
                      </script>
